<template>
  <div class="container">

    <div class="wrapper">
      <b>模板引用</b>
      <div>
        <!-- 使用组件 -->
        <local-date ref="date"></local-date>
      </div>
    </div>

    <div class="wrapper">
      <b>异步组件</b>
      <div></div>
    </div>

    <div class="wrapper">
      <b>递归组件</b>
      <div></div>
    </div>

  </div>
</template>

<script>
// 导入组件
import LocalDate from '@/components/LocalDate.vue';

export default {
  name: 'App',
  // 局部注册
  components: {
    'local-date': LocalDate
  },
  mounted(){
    // 通过 $refs 和 reference ID 找到指定的子组件并调用其方法
    this.$refs.date.setMonthStyle();
  }
}
</script>

<style scoped>
.container {
  width: 80% ;
  margin: auto ;
}

.wrapper {
  margin: 10px ;
  border: 1px solid blue ;
}

.wrapper>b {
  display: block ;
  color: rgb(136, 34, 231) ;
  background: #f4f4f4;
  margin: 5px ;
}

.wrapper>div {
  margin: 5px ;
  border: 1px solid #dedede ;
}
</style>
